import React from "react";
import {
  TouchableOpacity,
  Text,
  ActivityIndicator,
  StyleSheet,
  ViewStyle,
} from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import styles from "./FormButton.style";

interface FormButtonProps {
  title: string;
  onPress: () => void;
  isLoading?: boolean;
  disabled?: boolean;
  style?: ViewStyle;
}

/**
 * 通用表单按钮组件，支持加载状态和禁用状态
 */
const FormButton: React.FC<FormButtonProps> = ({
  title,
  onPress,
  isLoading = false,
  disabled = false,
  style,
}) => {
  const { colors } = useTheme();
  const isDisabled = disabled || isLoading;

  return (
    <TouchableOpacity
      style={[
        styles.button,
        { backgroundColor: colors.button.primary },
        isDisabled && styles.disabledButton,
        style,
      ]}
      onPress={onPress}
      disabled={isDisabled}
      activeOpacity={0.8}
    >
      {isLoading ? (
        <ActivityIndicator color={colors.button.primaryText} size="small" />
      ) : (
        <Text style={[styles.buttonText, { color: colors.button.primaryText }]}>
          {title}
        </Text>
      )}
    </TouchableOpacity>
  );
};

export default FormButton;
